<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { EvaluationItemData, RequestPath, startRequest } from '../base/RequestWork';
import { ElMessage } from 'element-plus';
// 商品id
const props = defineProps(['id'])
// 商品详情数据
let goods = ref()
// 评价数据
let evaluations = ref<EvaluationItemData[]>([])
let limit = 2
let hasMore = ref(true)
// 购买的商品件数
let buyCount = ref(0)
// 加载组件时获取商品数据
onMounted(()=>{
    loadGoods()
    loadEvaluations()
})
function loadGoods() {
    startRequest(RequestPath.goodsGet, 'get', {id: props.id}).then((response)=>{
        goods.value = response.data.datas[0];
    }).catch((error)=>{
        ElMessage.error({
            message: error.response.data.error
        })
    })
}

function loadEvaluations() {
    let params:any = {
        limit,
        offset: evaluations.value.length,
        filter: 1,
        gid: props.id
    }
    startRequest(RequestPath.evaluationListGet, 'get', params).then((response)=>{
        hasMore.value = (response.data.datas ?? []).length >= limit
        // 对属性进行赋值
        evaluations.value.push(...(response.data.datas as []));
    }).catch((error)=>{
        ElMessage.error({
            message: error.response.data.error
        })
    })
}

// 添加购物车的方法，暂时空实现
function addToCar() {
    let gid = goods.value.id
    let count = buyCount.value
    if (gid && count > 0) {
        startRequest(RequestPath.shopAdd, 'get', {gid, count}).then(()=>{
            // 添加购物车成功
            ElMessage.success({
                message: "添加购物车成功"
            })
        }).catch((error)=>{
            ElMessage.error({
                message: error.response.data.error
            })
        })
    }
}
</script>

<template>
    <!-- 商品基本信息内容区 -->
    <div class="content">
        <div style="width: 300px; height: 300px; border: 4px red solid;">
            <el-image style="width: 100%; height: 100%;" :src="goods?.image" fit="cover"/>
        </div>
        <div style="margin-left: 20px;">
            <div style="font-weight: 900; font-size: 30px;">
                {{ goods?.name }}
            </div>
            <div style="font-size: 15px;">
                {{ goods?.description }}
            </div>
            <div style="background-color: azure; width: 500px; height: 100px; margin-top: 20px; padding:10px;">
                <div style="font-size: 35px; color: red;">惊喜折扣价：{{ goods?.discounted_price }}￥</div>
                <div style="font-size: 15px; margin-top: 10px;">原价：{{ goods?.price }}￥</div>
            </div>
            <div style="margin-top: 15px; color: #555555;">库存：{{ goods?.stock }}件</div>
            <div style="margin-top: 10px;">
                <el-input-number :min="0" :max="goods?.stock ?? 0" v-model="buyCount" />
                <el-button type="primary" style="margin-left: 20px;" :disabled="buyCount == 0" @click="addToCar">加入购物车</el-button>
            </div>
            <div style="font-size: 13px; margin-top: 10px; color: gray;">温馨提示：商品有任何质量问题无条件退换</div>
        </div>
    </div>
    <!-- 商品详情与评价内容区 -->
    <div>
        <el-tabs
            type="card"
            class="demo-tabs"
            style="margin-top: 40px;">
            <el-tab-pane label="商品详情">
                <div v-html="goods?.detail" class="editor-content-view"></div>
            </el-tab-pane>
            <el-tab-pane label="商品评价">
                <el-empty description="暂无评价" v-show="evaluations.length == 0"/>
                <div style="margin-bottom: 40px;">
                    <div v-for="item in evaluations" style="margin-top: 30px;">
                        <div style="font-size: 20px; color: #555555;">{{ item.user.username }}发布评价:</div>
                        <div><el-rate v-model="item.star" disabled show-score text-color="#ff9900" score-template="{value} 分"/></div>
                        <div style="margin-top: 10px; font-size: 20px;">{{ item.content }}</div>
                        <div style="float: right; color: #717171;">发布时间：{{ item.created_at }}</div>
                        <div style="height: 1px; background-color: #c1c1c1; margin-top: 30px;"></div>
                    </div>
                    <div v-show="hasMore" style="width: 100%; text-align: center; margin-top: 15px; color: grey;" @click="loadEvaluations">点击加载更多</div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<style scoped>
.content {
    display: flex;
    flex-direction: row;
    margin-top: 20px;
}
</style>